﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JSTest.aspx.cs" Inherits="JSTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Use JS instead of server event to do something</title>

    <script type="text/javascript">
        function ShowInfo(ddl)
        {
            var lbMsg = document.getElementById("lbMsg");
            var selectedOption = ddl.options[ddl.selectedIndex];
            var value = selectedOption.innerHTML;
            lbMsg.value = value;
            switch(selectedOption.getAttribute("op"))
            {
                case "0":
                    var divDetail = document.getElementById("divDetail");
                    DisableDetail(divDetail);
                    break;
                default:
                    break;
            }
        }
        function DisableDetail(divDetail)
        {
            var childList = divDetail.getElementsByTagName("*");
            for(i=0;i < childList.length;i++)
            {
                childList[i].setAttribute("disabled","disabled");
            }
        }    
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList runat="server" ID="ddlList">
        </asp:DropDownList>
        <input type="text" id="lbMsg" style="width: 300px" />
    </div>
    <div id="divDetail">
        <input dis type="text" value="This is the detail info of select." name="d1" />
    </div>
    </form>
</body>
</html>
